@activeColor: #007ef5;
.flow-group {
  font-size: 12px;
  .flow-group-panel {
    .flow-group-panel-header {
      height: 40px;
      width: 100%;
      border: 1px solid #c0c0c0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      .flow-group-panel-header-title {
        display: flex;
        align-items: center;
        color: #504f4f;
        transition: 0.3s;
        &.active {
          color: @activeColor;
        }
        .flow-group-panel-header-name {
          font-size: 14px;
        }
        .flow-group-panel-header-icon {
          font-size: 14px;
          margin-right: 8px;
        }
      }
      .flow-group-panel-header-drop {
        .flow-drop-down {
          transition: 0.3s;
          &.active {
            transform: rotate(90deg);
            color: @activeColor;
          }
        }

      }
    }
    .flow-group-panel-body {
      background-color: #f3f2f2;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      // padding: 10px 0;
      // height: 0px;
      transition: 0.3s ease;
      overflow: hidden;
      &.active {
        // animation: GroupHeaderUp 0.3s forwards;
      }
      &.unactive {
        // animation: GroupHeaderDown 0.3s forwards;
      }
      &.show {
        display: flex;
      }
      &.hide {
        display: none;
      }
    }
  }
  .panel-node {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    position: relative;
    flex-flow: column;
    width: 100%;
    // &.circle {
    //   border-radius: 50%;
    // }
    .node-item {
      display: flex;
      align-items: center;
      justify-content: center;
      .panel-node-rect-icon {
        height: 30px;
        width: 30px;
        pointer-events: none;
        border-radius: 50%;
        &.diamond {
          transform: rotate(-45deg);
          width: 25px;
          height: 25px;
        }
      }
      &.diamond {
        transform: rotate(45deg);
        margin-bottom: 10px;

      }
    } 
    margin-top: 8px;
    & + .panel-node {
      // margin-top: 8px;
      border-top: 1px solid #c0c0c0;
      .node-item {
        margin-top: 8px;
      }
    }
  }
}

@keyframes GroupHeaderUp {
  from {
    // height: 0px;
    opacity: 0;
  }
  to {
    // height: 100px;
    opacity: 1;
  }
}

@keyframes GroupHeaderDown {
  from {
    // height: 100px;
    opacity: 1;
  }
  to {
    height: 0px;
    opacity: 0;
  }
}